/**
 * @Author: liutao
 * @Date:   2017-03-15T11:27:54+08:00
 * @Email:  947809647@qq.com
 * @Last modified by:   liutao
 * @Last modified time: 2017-03-21T10:38:02+08:00
 */

@import '../../../css/var';
@import '../../../css/animate';
$header-height: 50px;

header {
  position: relative;
  z-index: 10;

  height: $header-height;

  background: #242f42;
  .header-content {
    position: relative;

    width: 100%;
    height: 100%;
  }
  .left {
    float: left;

    margin: 15px 0 0 20px;

    white-space: nowrap;
    .logo {
      display: inline-block;

      width: 18px;
      height: 18px;

      vertical-align: middle;
    }
    .header-title {
      font-size: 16px;

      display: inline-block;

      margin-left: 10px;

      vertical-align: middle;

      color: #fff;
    }
  }
  .right {
    line-height: 0;

    float: right;

    margin: 15px 20px 0 0;

    white-space: nowrap;
    .username,
    .exit {
      display: inline-block;

      vertical-align: middle;
    }
    .username {
      color: #fff;
    }
    .exit {
      font-size: 16px;

      margin-left: 10px;

      cursor: pointer;

      color: $primary;
      &:hover {
        color: $blue;
      }
    }
  }
}
